<template>
    <section
        :class="['bx-list', item.endStatus === 0 ? 'no-close-case' : 'close-case', item.spread ? '' : 'active']"
        v-for="item in list"
        :key="item.lossoccurdate"
    >
        <section class="bx-head" @click="onSpread(item)">
            <section class="bx-time">{{ item.lossoccurdate }}</section>
            <section class="bx-money">
                <span>{{ Number(item.vehiclelossamount) ? '≈' : '' }}{{ Number(item.vehiclelossamount) }}元</span>
                <span :class="['iconfont', item.spread ? 'icon-RectangleCopy8' : 'icon-RectangleCopy5']"></span>
            </section>
        </section>
        <section class="bx-content" v-show="item.spread">
            <section class="bx-info">
                <span>
                    <i>结案状态</i>
                    <p class="status">{{ item.claimStatus }}</p>
                    <!-- <p :class="['status', item.endStatus === 0 ? '' : 'active']">
                        {{ item.endStatus === 0 ? '未结案' : '已结案' }}
                    </p> -->
                </span>
                <span>
                    <i>维修明细表</i>
                    <p>
                        {{
                            item.maintenanceRecord.length +
                            item.maintenanceRecord2.length +
                            item.maintenanceRecord3.length
                        }}条记录
                    </p>
                </span>
            </section>
            <template v-if="item.maintenanceRecord2.length">
                <section class="type">维修</section>
                <section class="bx-table">
                    <section class="bx-table-header table-column">
                        <span>维修项目</span>
                        <span>维修类型</span>
                        <span>数量</span>
                    </section>
                    <section class="bx-table-body">
                        <section class="table-column" v-for="child in item.maintenanceRecord2" :key="child.losspart">
                            <span>{{ child.losspart }}</span>
                            <span>{{ child.type }}</span>
                            <span>{{ child.num }}</span>
                        </section>
                    </section>
                </section>
            </template>
            <template v-if="item.maintenanceRecord.length">
                <section class="type">更换</section>
                <section class="bx-table">
                    <section class="bx-table-header table-column">
                        <span>维修项目</span>
                        <span>维修类型</span>
                        <span>数量</span>
                    </section>
                    <section class="bx-table-body">
                        <section class="table-column" v-for="child in item.maintenanceRecord" :key="child.losspart">
                            <span>{{ child.losspart }}</span>
                            <span>{{ child.type }}</span>
                            <span>{{ child.num }}</span>
                        </section>
                    </section>
                </section>
            </template>
            <template v-if="item.maintenanceRecord3.length">
                <section class="type">其它</section>
                <section class="bx-table">
                    <section class="bx-table-header table-column">
                        <span>维修项目</span>
                        <span>维修类型</span>
                        <span>数量</span>
                    </section>
                    <section class="bx-table-body">
                        <section class="table-column" v-for="child in item.maintenanceRecord3" :key="child.losspart">
                            <span>{{ child.losspart }}</span>
                            <span>{{ child.type }}</span>
                            <span>{{ child.num }}</span>
                        </section>
                    </section>
                </section>
            </template>
        </section>
    </section>
</template>
<script setup lang="ts">
import { reactive, watchEffect } from 'vue'

interface maintenance {
    losspart?: string //损失部位
    type?: string //维修项类型 （1:更换 ,2:维修 ,3:材料,空字符串:其他）
    num?: number //数量
    // ishotsincedetonation?: string //是否火烧
    // isrobber?: string //是否盗抢
    // iswaterflooded?: string //是否水淹
}
interface ItemInterface {
    accidentliab?: string //事故责任划分
    claimType?: number //类型 1商业险 2交强险
    claimStatus?: string //案件状态
    endStatus?: number //结案状态 默认0 , 0 未结案 1 结案
    lossoccurdate?: string //出险时间，精确到天
    vehiclelossamount?: string | number //维修金额（金额分为单位）
    optioncause?: string //事故原因
    maintenanceRecord: maintenance[] //更换记录
    maintenanceRecord2: maintenance[] //维修记录
    maintenanceRecord3: maintenance[] //材料其它维修记录
    spread: boolean
}

const props = defineProps(['data', 'download'])
//维修
const list: ItemInterface[] = reactive([])

const dangerSingleType = ['更换', '维修', '材料', '其他']
watchEffect(() => {
    list.length = 0
    console.log('data', props.data)
    props.data.forEach((item: any) => {
        const losspartList: maintenance[] = []
        const losspartList2: maintenance[] = []
        const losspartList3: maintenance[] = []
        item.recordResults.forEach((item: any) => {
            if (item.dangerSingleName !== '') {
                if (Number(item.dangerSingleType) === 1) {
                    //更换
                    losspartList.push({
                        losspart: item.dangerSingleName,
                        type: item.dangerSingleType ? dangerSingleType[Number(item.dangerSingleType) - 1] : '其他',
                        num: 1
                    })
                } else if (Number(item.dangerSingleType) === 2) {
                    //维修
                    losspartList2.push({
                        losspart: item.dangerSingleName,
                        type: item.dangerSingleType ? dangerSingleType[Number(item.dangerSingleType) - 1] : '其他',
                        num: 1
                    })
                } else {
                    //其它
                    losspartList3.push({
                        losspart: item.dangerSingleName,
                        type: item.dangerSingleType ? dangerSingleType[Number(item.dangerSingleType) - 1] : '其他',
                        num: 1
                    })
                }
            }
        })

        //claimStatus: "已结案,结案金额大于0" 中 截取 前三个字
        let a = item.claimStatus.split('')
        if (a.length > 3) {
            a.length = 3
        }

        list.push({
            accidentliab: item.accidentliab,
            claimType: item.claimType,
            claimStatus: a.join(''),
            endStatus: item.endStatus,
            lossoccurdate: item.date,
            vehiclelossamount: item.serviceMoney,
            optioncause: item.optioncause,
            maintenanceRecord: [...losspartList],
            maintenanceRecord2: [...losspartList2],
            maintenanceRecord3: [...losspartList3],
            spread: true
        })
    })
    if (props.download) {
        list.forEach((item: ItemInterface) => {
            item.spread = true
        })
    }
})

const onSpread = (item: ItemInterface) => {
    item.spread = !item.spread
}
</script>
<style scoped lang="scss">
.bx-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--cxl-size-14);
    margin: var(--cxl-size-12) 0;
    padding-bottom: var(--cxl-size-12);
    border-bottom: 1px solid var(--cxl-color-f0f0f0);
    font-weight: 600;
    p {
        color: var(--cxl-color-primary);
    }
}

.bx-list {
    margin: var(--cxl-size-16) 0 0 0;
    padding-bottom: var(--cxl-size-16);
    &.active {
        &:not(:last-child) {
            border-bottom: 1px solid var(--cxl-color-f0f0f0);
        }
    }

    .bx-type {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: var(--cxl-size-12) 0;
        span {
            font-size: var(--cxl-size-15);
            font-weight: bold;
        }
        &.active {
            i {
                background-color: var(--cxl-color-primary);
            }
        }
        i {
            font-size: var(--cxl-size-13);
            display: flex;
            height: var(--cxl-size-24);
            align-items: center;
            padding: 0 var(--cxl-size-12);
            color: var(--cxl-color-white);
            background-color: var(--cxl-color-ff5448);
            border-radius: var(--cxl-size-12) 0 0 var(--cxl-size-12);
            margin-right: calc(0% - var(--cxl-size-12));
        }
    }
    .type {
        display: inline-block;
        line-height: var(--cxl-size-24);
        padding: 0 var(--cxl-size-12);
        color: var(--cxl-color-white);
        font-size: var(--cxl-size-14);
        border-radius: 0 var(--cxl-size-12) 0 0;
        background-color: var(--cxl-color-333333);
        margin-top: var(--cxl-size-12);
    }
    .bx-info {
        display: flex;
        flex-wrap: wrap;
        span {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: var(--cxl-size-10);
            width: 100%;
            i {
                display: block;
                width: auto;
            }
            p {
                font-size: var(--cxl-size-15);
                &.status {
                    height: var(--cxl-size-24);
                    color: var(--cxl-color-error);
                    border-radius: var(--cxl-size-12);
                    line-height: var(--cxl-size-24);

                    color: var(--cxl-color-999999);
                    &.active {
                        color: var(--cxl-color-primary);
                    }
                }
            }
        }
    }

    .table-column {
        font-size: var(--cxl-size-15);
        display: flex;
        align-items: center;
        height: auto;
        line-height: var(--cxl-size-24);

        &.bx-table-header {
            background-color: var(--cxl-color-f2f6f8);
            height: var(--cxl-size-30);
            font-weight: bold;
        }
        > span {
            display: block;
            text-align: center;
            &:nth-child(1) {
                width: 40%;
            }
            &:nth-child(2) {
                width: 35%;
            }
            &:nth-child(3) {
                width: 25%;
            }
        }
    }
    .bx-table-body {
        border-left: 1px solid var(--cxl-color-f2f6f8);
        border-right: 1px solid var(--cxl-color-f2f6f8);
        .table-column {
            box-sizing: border-box;
            padding: var(--cxl-size-6) var(--cxl-size-10);
            border-bottom: 1px solid var(--cxl-color-f2f6f8);
            color: var(--cxl-color-999999);
        }
    }

    .bx-head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bx-time {
            font-size: var(--cxl-size-18);
            font-weight: 600;
        }
        .bx-money {
            font-size: var(--cxl-size-18);
            font-weight: 600;
            display: flex;
            align-items: center;
            .iconfont {
                font-size: var(--cxl-size-30);
            }
        }
    }
}
</style>
